<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/style.css" media="all">
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../static/js/base.js" charset="utf-8"></script>
    <script src="../../static/js/ax.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="../../static/js/html5shiv.min.js"></script>
<script src="../../static/js/respond.min.js"></script>
<![endif]-->

<!--主体内容-->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-fluid layui-form layui-form-pane content-wrap">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-sm4">
                    <label class="layui-form-label">用户姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <label class="layui-form-label">用户账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" id="username" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <label class="layui-form-label">驾校名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="depName" id="depName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-sm4 layui-inline">
                    <label class="layui-form-label">账号状态</label>
                    <div class="layui-input-block">
                        <select id="userSate" name="userSate" lay-verify="required">
                            <option value>全部</option>
                            <option value=-1>停用</option>
                            <option value=1>启用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <button class="layui-btn add_btn" data-type="reload" onclick="searchBtn()"
                            style="margin-left: 10px;"><i class="layui-icon layui-icon-search"></i>搜索
                    </button>
                    <button class="layui-btn newsAdd_btn add_btn" style="margin-left: 10px;"><i
                            class="layui-icon layui-icon-add-1"></i>新增
                    </button>
                </div>
            </div>
            <table class="layui-hide" id="user" lay-filter="eventBtn"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn  layui-btn-xs delete_btn btn-left" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
                <a class="layui-btn layui-btn-xs change_btn btn-left" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>

            </script>
        </div>

    </div>
</div>
<!--主体内容-->

<script src="../../layui/layui.all.js" charset="utf-8"></script>
<script>
    var tableIns;
    layui.use(['table', 'layer', 'element', 'form'], function () {
        var table = layui.table,
            element = layui.element;
        var form = layui.form;
        form.on('switch(switchTest)', function (data) {
            var id = data.value;
            var state = this.checked ? 1 : -1
            ax.post({
                url: backendWebUrl+"/api/school/user/updateUserState",
                type: "POST",
                data: {"state": state, "id": id},
                contentType: "application/x-www-form-urlencoded",
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg(data.message, {icon: 6});
                    } else {
                        layer.msg(data.message, {icon: 5});
                    }
                }
            });
        });

        tableIns = ax.VTable({
            elem: "#user",
            id: "contenttable",
            url: backendWebUrl+'/api/school/user/list',
            method: 'POST',
            cols: [[
                {field: '序列号', width: 80, title: '序列号', sort: true, type: 'numbers'},
                {field: 'name', title: '用户姓名'},
                {field: 'username', title: '用户账号'},
                {
                    field: 'state', title: '账号状态', width: 100, templet: function (d) {
                        if (d.state == -1) {
                            return '<div> <input type="checkbox" value="' + d.id + '"   name="open" lay-skin="switch" lay-filter="switchTest" lay-text="启用|停用"> </div>';
                        } else if (d.state == 0) {
                            return '<span style="color: #007cff;">待激活</span>';
                        } else if (d.state == 1) {
                            return '<div> <input type="checkbox" value="' + d.id + '" checked  name="close" lay-skin="switch" lay-filter="switchTest" lay-text="启用|停用"> </div>';
                        } else {
                            return "";
                        }
                    }
                },
                {field: 'depName', title: '所属驾校'},
                {field: 'operatorName', title: '创建人', width: 120},
                {field: 'created', title: '创建时间', width: 160},
                {field: 'right', title: '操作', width: 180, toolbar: "#barDemo"}
            ]]
        });

        table.on('tool(eventBtn)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除？', function (index) {
                    ax.post({
                        url: backendWebUrl+"/api/school/user/delUser",
                        type: "POST",
                        data: {"id": data.id},
                        contentType: "application/x-www-form-urlencoded",
                        success: function (data) {
                            if (data.code == 0) {
                                obj.del();
                                layer.close(index);
                                layer.msg(data.message, {icon: 6});
                            } else {
                                layer.msg(data.message, {icon: 5});
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                index = layui.layer.open({
                    title: "编辑",
                    type: 2,
                    fixed: true, //不固定
                    maxmin: true,
                    area: ['90%', '80%'],
                    content: "userEdit.html?id=" + data.id,
                    success: function (layero, index) {
                        setTimeout(function () {
                            layui.layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        }, 500)
                    }
                })
                // layui.layer.full(index);
            }
        });


    });

    function searchBtn() {
        tableIns.reload({
            page: {curr: 1},
            where: { //设定异步数据接口的额外参数，任意设
                name: $("#name").val(),
                username: $("#username").val(),
                depName: $("#depName").val(),
                userSate: $("#userSate").val()
            }
        });
    };

    function returnBtn() {
        layer.close(index);
        tableIns.reload({
            where: {},
            page: {curr: 1}
        });
    }

    //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
    $(".newsAdd_btn").click(function () {
        index = layui.layer.open({
            id: '',
            title: "新增用户",
            type: 2,
            fixed: true, //不固定
            maxmin: true,
            area: ['90%', '80%'],
            content: "userAdd.html",
            success: function (layero, index) {
                setTimeout(function () {
                    layui.layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500)
            }
        });
        //layui.layer.full(index);
    });
</script>
</body>
</html>